<template>
	<div class="cart-list">
		<scroll 
				class="scroll" 
				ref="scroll"
			>
			<cart-list-item
			v-for="(item,index) in cartInfo"
					:product="item"
					:key="index"
					@checkChange="checkChange"
				></cart-list-item>
			
			<div class="bottom"></div>
		</scroll>
	</div>
</template>

<script>
	import scroll from 'components/common/scroll/scroll'
	import CartListItem from './CartListItem'
	export default{
		name:'CartList',
		components:{
			scroll,
			CartListItem
		},
		data(){
			return {
				cartInfo:this.$store.state.cartList,
				totalSelected:0
			}
		},
		activated() {
			this.$refs.scroll.refresh();
			this.$emit('checkChange',this.totalSelected);
		},
		methods:{
			checkChange(){
				this.totalSelected = this.$store.state.cartList.filter(item => item.isShow == true ).length;
				this.$emit('checkChange',this.totalSelected);
			}
		}
	}
</script>

<style scoped="scoped">
	.cart-list {
		padding-top: 44px;
		height: 100vh;
		overflow: hidden;
	}
	.scroll {
		position: relative;
		left: 0;
		right: 0;
		top: 0;
		width: 100vw;
		overflow: hidden;
	}
	.bottom{
		width: 100vw;
		height: 120px;
		background: #FFF;
	}
</style>
